import { useState } from 'react';
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import { Row, Col, Cell } from '@nutui/nutui-react-taro';
import Drivingup from '@/assets/Drivingup.png';
import Driving from '@/assets/Driving.png';
import './index.less';

const IdCardUpload = (props) => {
  const [idCardFront, setIdCardFront] = useState(null);
  const [idCardBack, setIdCardBack] = useState(null);

  const handleImageSelect = (setType) => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        setType(res.tempFiles[0].path);
      },
    });
  };

  return (
    <>
      <Row>
        <View className="driving">
          <View className="driving_img">
            <View className="driving_name">点击上传行驶证主页</View>
            {idCardFront ? (
              <Image className="car_info" src={idCardFront} />
            ) : (
              <Image
                className="car_info"
                src={Drivingup}
                onClick={() => handleImageSelect(setIdCardFront)}
              />
            )}
          </View>
          <View className="driving_img">
            <View className="driving_name">点击上传行驶证副页</View>
            {idCardBack ? (
              <Image className="car_info" src={idCardBack} />
            ) : (
              <Image
                className="car_info"
                src={Driving}
                onClick={() => handleImageSelect(setIdCardBack)}
              />
            )}
          </View>
        </View>
      </Row>
      <Row>
        <View className="driving_bottom" style={{ whiteSpace: 'nowrap', fontSize: '26rpx' }}>
          <View>请确保证件</View>
          <View style={{ color: '#1c8cdf' }}>边框完整无遮挡、内容清晰无反光</View>
        </View>
      </Row>
    </>
  );
};

export default IdCardUpload;
